<template>
  <view class="con">
    
    <!-- 头部 -->
    <view class="topWrap">
      <view :style="{marginTop: systemBarHeight + 'px'}"></view>
      <view class="topssss">
        <image class="topssss_img" @click="fanuiBtn" mode="widthFix" src="/static/index/img29.png"></image>
        <view>闲鱼宝藏</view>
      </view>
      <view class="top flex flex_between">
        <view class="topz flex flex_between">
          <input class="topz_ipu"  type="text" placeholder="请输入昵称或ID" v-model="username"/>
          <image class="topz_img" mode="widthFix" src="/static/index/img27.png" @click="searchHandle"></image>
        </view>
        <view class="topy flex flex_between" @click="showVideoBtn">
          <image class="topyimg" mode="widthFix" src="/static/index/img28.png"></image>
          <view class="topy_t">实操教程</view>
        </view>
      </view>
      <view class="top2 flex flex_between">
        <navigator url="/packageA/index/woDeXianYu" class="top2li">
          <view class="top2lic">我的闲鱼</view>
        </navigator>
        <navigator url="/packageA/index/woDeHuDan" class="top2li">
          <view class="top2lic">我的互单</view>
        </navigator>
        <navigator url="/packageA/index/woDeHuiDan" class="top2li">
          <view class="top2lic">我的回单</view>
          <view class="top2lic_te" v-if="Number(daiHunDanNum)>0">{{daiHunDanNum}}</view>
        </navigator>
      </view>
      <view class="top3">
        <text class="top3_t1">温馨提示</text>
        <text class="top3_t2">你的回单率为</text>
        <text class="top3_t1">{{userInfo.xian_min || 0}}min</text>
        <text class="top3_t2">，加快回单速度获得更多曝光哦</text>
      </view>
    </view>
    <!-- 互助广场 -->
    <view class="guanc">
      <view class="guancT">互助广场</view>
      <view class="guancC">
        <view class="guancCli flex flex_between" v-for="(item,index) in myxianBaoList" @click="goHuDan(item)">
          <view class="guancCliz flex">
            <image class="guancCliz_img" mode="widthFix" :src="item.head"></image>
            <view class="guancCliz_v">
              <view class="guancCliz_v1">{{item.nikename}}</view>
              <view class="guancCliz_v2">{{item.nicknum}}</view>
            </view>
          </view>
          <view class="guancCliz_y flex">
            <view class="guancCliz_y1">{{item.xian_min}}<text>min</text></view>
            <view class="guancCliz_y2">闲鱼互单<text>{{item.xian_num}}</text>产品</view>
          </view>
        </view>
      </view>
    </view>
    <view class="zhezhao" v-if="isShow_video" @click="hideVideo"></view>
    <!-- 实操课程 -->
    <view class="tan tan_video" v-if="isShow_video">
      <video id="myVideo" :src="xianTip.video"  @error="videoErrorCallback" :danmu-list="danmuList" enable-danmu danmu-btn controls></video>
    </view>
  </view>
</template>

<script>
  import {
    xianXianBaoList,//闲鱼宝藏
    otherXianTips,//视频，说明
    xianxianMyHui //我的回单
  } from '@/request/api.js'
  export default {
    data() {
      return {
        openid: uni.getStorageSync('openid'), //获取缓存的openid
        userInfo: uni.getStorageSync('userInfo'), //获取用户头像昵称
        systemBarHeight: 0,
        isShow_video:false,//视频
        username:'',
        page:1,//页码
        total:0,//总共的数量
        pagesizes:15,//每页数量
        myxianBaoList:[],//闲鱼宝藏列表
        xianTip:{},
        daiHunDanNum:0 //我的回单数量
      };
    },
    onLoad() {
      this.getStatusBarHeight();
      this.getXianBaoListFun() //闲鱼宝藏列表
      this.otherXianTipsFun()//闲鱼宝藏视频
      console.log('个人信息')
      this.userInfo = uni.getStorageSync('userInfo')
      console.log(this.userInfo)
      this.getXianMyHuiListFun() //获得我的回单数量
    },
    onReachBottom() {
      let totolPage =Math.ceil(this.total / this.pagesizes) 
      console.log('总共多少页')
      console.log(totolPage)
      if(this.page<=totolPage){
        this.loadMore(); // 当上拉时加载更多数据
      }
    },
    methods: {
      // 获取我的回单数量
      getXianMyHuiListFun(){
        let that = this
        let param = {
          openid:this.openid,
          page:1,
          ed:1
        }
        xianxianMyHui(param).then(res=>{
          this.daiHunDanNum =Number(res.data.total);
        })
      },
      getStatusBarHeight() {
        uni.getSystemInfo({
            success: res => {
              console.log(res.statusBarHeight)
              this.systemBarHeight = res.statusBarHeight;
              console.log('是多少')
              console.log(this.systemBarHeight)
              const systemInfo = uni.getSystemInfoSync()
              if (systemInfo.osName === 'ios'){
                console.log('是苹果机')
              }
              if (systemInfo.osName === 'android'){
                console.log('是安卓机')
                this.systemBarHeight = res.statusBarHeight + 4;
              }
            }
          });
      },
      // 点击实操教程
      showVideoBtn(){
        this.isShow_video = true
      },
      hideVideo(){
        this.isShow_video = false
      },
      otherXianTipsFun(){
        otherXianTips().then(res => {
          console.log('获取闲鱼宝藏说明')
          console.log(res)
          if (res.error_code === 0) {
            this.xianTip = res.data
          } else {
            uni.showToast({
              icon: 'none',
              title: res.msg
            })
          }
        })
      },
      // 加载更多
      loadMore(){
        this.page = this.page+1
        this.getXianBaoListFun()
      },
      // 获取我的闲鱼宝藏列表
      getXianBaoListFun(){
        let that = this
        let param = {
          openid:this.openid,
          page:this.page,
          username:this.username
        }
        xianXianBaoList(param).then(res=>{
          this.total = Number(res.data.total);
          this.pagesizes = Number(res.data.pagesizes);
          let listRe = res.data.arrList
          if(listRe.length>0){
            that.myxianBaoList = that.myxianBaoList.concat(listRe);
          }
        })
      },
      // 点击进入"我要互单"
      goHuDan(item){
        console.log('点击前面的--')
        console.log(item)
        uni.navigateTo({
          url:'/packageA/index/woYaoHuiDan?peopleInfo='+JSON.stringify(item)
        });
      },
      // 点击搜索
      searchHandle(){
        console.log('点击我的搜索')
        this.page = 1
        this.myxianBaoList = []
        this.getXianBaoListFun()
      },
      fanuiBtn(){
        uni.navigateBack({
          delta: 1
        });
      },
      
    }
  }
</script>

<style scoped lang="scss">
  page{
    padding: 0;
    margin: 0;
    background-color: rgba(238,238,238,1);
  }
  
  .con{
    width: 100%;
    height: auto;
    padding: 0;
    margin: 0;
  }
  .topWrap{
    width: 100%;
    height: auto;
    background: linear-gradient(180deg, rgba(249,191,65,1) 0%,rgba(238,238,238,1) 100%);
    color: rgba(16,16,16,1);
    padding: 20rpx;
    box-sizing: border-box;
    .top{
      width: 100%;
      height: auto;
      .topz{
        width:440rpx;
        height: 80rpx;
        border-radius: 100rpx;
        background-color: rgba(255,246,228,1);
        color: rgba(136,136,136,1);
        font-size: 28rpx;
        padding: 0 30rpx;
        box-sizing: border-box;
        .topz_ipu{
          color: #F9BF41;
        }
        .topz_img{
          width: 48rpx;
          height: auto;
        }
      }
      .topy{
        width: 242rpx;
        height: 80rpx;
        border-radius: 100rpx;
        background-color: rgba(255,246,228,1);
        justify-content: center;
        .topyimg{
          width: 38rpx;
          height: auto;
        }
        .topy_t{
          color: rgba(249,191,65,1);
          font-size: 28rpx;
          font-weight: bold;
          margin-left: 10rpx;
        }
      }
    }
    .top2{
      background-color: rgba(255,255,255,1);
      width: 100%;
      height: auto;
      border-radius: 20rpx;
      margin-top: 50rpx;
      padding: 30rpx;
      box-sizing: border-box;
      .top2li{
        width: 190rpx;
        height: 90rpx;
        border-radius: 100rpx;
        background: linear-gradient(180deg, rgba(253,230,179,1) 0%,rgba(255,246,246,0) 100%);
        text-align: center;
        line-height: 90rpx;
        color: rgba(16,16,16,1);
        font-size: 28rpx;
        font-weight: bold;
        position: relative;
        .top2lic_te{
          position: absolute;
          width: 48rpx;
          height: 24rpx;
          border-radius: 100rpx;
          background-color: rgba(216,30,6,1);
          text-align: center;
          line-height: 24rpx;
          top:0;
          right: 0;
          color: rgba(255,255,255,1);
          font-size: 24rpx;
        }
      }
    }
    .top3{
      width: 100%;
      padding: 0 10rpx;
      box-sizing: border-box;
      height: auto;
      margin-top: 54rpx;
      margin-bottom: 42rpx;
      word-break: break-all;
      padding: 0 30rpx;
      text{
        word-break: break-all;
      }
      .top3_t1{
        color: #D81E06;
        font-weight: bold;
        margin-right: 15rpx;
        font-size: 24rpx;
      }
      .top3_t2{
        font-size: 24rpx;
      }
    }
  }
  .guanc{
    width: 100%;
    height: auto;
    padding: 0 20rpx;
    box-sizing: border-box;
    .guancT{
      margin: 0 30rpx;
      color: rgba(0,0,0,1);
      font-size: 36rpx;
      margin-bottom: 30rpx;
    }
    .guancC{
      width: 100%;
      height: auto;
      .guancCli{
        width: 100%;
        height: auto;
        height: 80px;
        padding: 30rpx;
        border-radius: 20rpx;
        background-color: rgba(255,255,255,1);
        color: rgba(16,16,16,1);
        font-size: 28rpx;
        box-sizing: border-box;
        margin-bottom: 20rpx;
      }
      .guancCliz{
        width: 40%;
        .guancCliz_img{
          width: 80rpx;
          height: 80rpx;
          border-radius: 100%;
          margin-right: 20rpx;
        }
        .guancCliz_v1{
          line-height: 40rpx;
          color: rgba(16,16,16,1);
          font-size: 28rpx;
        }
        .guancCliz_v2{
          color: rgba(16,16,16,1);
          font-size: 24rpx;
          line-height: 34rpx;
        }
      }
    }
    .guancCliz_y{
      width: 400rpx;
      justify-content: flex-end;
      // background: #f00;
      .guancCliz_y1{
        width: 180rpx;
        height: 80rpx;
        border-radius: 100rpx 0px 0px 100rpx;
        background: linear-gradient(180deg, rgba(0,0,0,1) 0%,rgba(255,246,228,1) 100%);
        text-indent: 16rpx;
        color: rgba(249,191,65,1);
        font-size: 28rpx;
        line-height: 80rpx;
        font-style: italic;
        position:relative;
        left: 34rpx;
      }
      .guancCliz_y2{
        width: 230rpx;
        height: 80rpx;
        border-radius: 100rpx;
        background: linear-gradient(180deg, rgba(249,191,65,1) 0%,rgba(255,246,228,1) 100%);
        font-size: 28rpx;
        line-height: 62rpx;
        z-index: 1;
        
        text-align: center;
        color: rgba(0,0,0,1);
        font-size: 24rpx;
        font-weight: bold;
        font-style: italic;
        text{
          color: rgba(216,30,6,1);
          font-size: 48rpx;
          
        }
      }
    }
    
  }
  .guancCliz_v{
    width: 155rpx;
  }
input::placeholder{
    color: #F9BF41;
  }
  .tan_video {
    width: 650rpx;
    height: 1105rpx;
    padding: 0 0;
    margin-left: -325rpx;
  }
  
  .tan.tan_video {
    margin-top: -552rpx;
  }
  
  video {
    width: 650rpx;
    height: 1105rpx;
  }
</style>